import { useEffect, useState } from "react";
import { Table, Tag, Button, Menu, Dropdown, Tooltip, Modal } from "antd";
import { QuestionCircleOutlined, DownOutlined, UpOutlined } from "@ant-design/icons";
import dayjs from "dayjs";
import { Subject } from "rxjs";
import QrDetail from "./qr_detail";
import { downloadIamge } from "@/assets/js/common";

interface ContentRightProps {
  loding: boolean;
  initFormData: any;
  setSelectedQr: any;
}

const subject = new Subject();

let visible = false;
let detailData: any = null;

/* 查看详情 */
const checkDetail = (text: any) => {
  detailData = text;
  visible = true;
  subject.next(Math.random() + 1);
};

/* 表头信息 */
const fixedColumns = [
  {
    title: "二维码",
    fixed: true,
    width: 121,
    render: (text: any) => {
      return (
        <img
          className="w-52 h-52 cursor-pointer"
          src={text.qr_code}
          alt=""
          onClick={() => {
            checkDetail(text);
          }}
        />
      );
    },
  },
  {
    title: "名称",
    width: 102,
    dataIndex: "name",
  },
  {
    title: (
      <div>
        扫码添加次数&nbsp;
        <Tooltip
          color="#fff"
          placement="top"
          title={
            <p className="text-grey-800">
              统计添加渠道码的人次，若客户重复添加将会记录多条数据
            </p>
          }>
          <QuestionCircleOutlined style={{ color: "#aaa" }} />
        </Tooltip>
      </div>
    ),
    width: 125,
    dataIndex: "add_user_count",
    render: (text: any) => text || 0,
  },
  {
    title: "创建时间",
    width: 102,
    dataIndex: "created_time",
    render: (text: any) => {
      return dayjs(text).format("YYYY-MM-DD HH:mm");
    },
  },
  {
    title: (text: any) => {
      return (
        <div>
          使用成员&nbsp;
          <Tooltip
            color="#fff"
            placement="top"
            title={
              <p className="text-grey-800 flex flex-col p-6">
                <span
                  className="cursor-pointer bg-blue-f7fcff mb-8 text-xs border-1 border-solid rounded-2 px-6 py-4 flex items-center border-grey-200 text-grey-800"
                  onClick={() => {
                    console.log(text);
                  }}>
                  <i className="iconfont icon-zhanghaoguanli icon-zhanghaoguanli text-blue-acd7ff mr-5"></i>
                  <i>为上线状态</i>
                </span>
                <span className="cursor-pointer bg-blue-f7fcff text-xs border-1 border-solid rounded-2 px-6 py-4 flex items-center border-grey-200 text-grey-800">
                  <i className="iconfont icon-zhanghaoguanli icon-zhanghaoguanli text-blue-acd7ff mr-5"></i>
                  <i>为下线状态</i>
                </span>
              </p>
            }>
            <QuestionCircleOutlined style={{ color: "#aaa" }} />
          </Tooltip>
        </div>
      );
    },
    width: 160,
    render: (text: any) => {
      return (
        <>
          <div className={`${!text.flag ? "overflow-hidden max-h-68" : ""}`}>
            {text.staffs.map((item: any) => {
              return (
                <Tag
                  className="leading-8 break-normal whitespace-normal bg-white mb-4 text-xs border-grey-200 text-grey-800 mr-10"
                  key={item.userid}
                  icon={
                    <i className="iconfont icon-zhanghaoguanli text-blue-acd7ff mr-5"></i>
                  }
                  color="#fff">
                  {item.userid}
                </Tag>
              );
            })}
          </div>
          {text.staffs.length > 2 ? (
            <div
              className="text-grey-600 cursor-pointer"
              onClick={() => {
                text.flag = !text.flag;
                subject.next(Math.random() + 1);
              }}>
              {!text.flag ? (
                <span>
                  展开
                  <DownOutlined />
                </span>
              ) : (
                <span>
                  收起
                  <UpOutlined />
                </span>
              )}
            </div>
          ) : null}
        </>
      );
    },
  },
  {
    title: () => {
      return (
        <div>
          备用成员&nbsp;
          <Tooltip
            color="#fff"
            placement="top"
            title={
              <p className="text-grey-800">
                渠道码中无在线成员时，将启用备用成员接待新客户
              </p>
            }>
            <QuestionCircleOutlined style={{ color: "#aaa" }} />
          </Tooltip>
        </div>
      );
    },
    width: 160,
    dataIndex: "backup_staff",
    render: (text: any) => {
      return (
        <Tag
          className="leading-8 break-all whitespace-normal bg-white mb-4 text-xs border-grey-200 text-grey-800 mr-10"
          icon={
            <i className="iconfont icon-zhanghaoguanli icon-zhanghaoguanli text-blue-acd7ff mr-5"></i>
          }
          color="#fff">
          {text.name}
        </Tag>
      );
    },
  },
  {
    title: "标签",
    dataIndex: "auto_mark_tag",
    width: 160,
    render: (text: any) => {
      if (!text) {
        return "-";
      }
      return (
        <>
          {text.map((item: any) => {
            return (
              <Tag
                key={item.id}
                color="#fff"
                className="leading-8 break-all whitespace-normal bg-white mb-4 text-xs border-grey-200 text-grey-800 mr-10">
                {item.name}
              </Tag>
            );
          })}
        </>
      );
    },
  },
  {
    title: "操作",
    width: 283,
    render: (text: any) => {
      return (
        <>
          <Button
            className="py-0 px-8 leading-none border-0 border-r-1 border-solid border-grey-200"
            type="link">
            数据统计
          </Button>
          <Button
            className="py-0 px-8 leading-none border-0 border-r-1 border-solid border-grey-200"
            type="link"
            onClick={() => {
              checkDetail(text);
            }}>
            详情
          </Button>
          <Button
            type="link"
            className="py-0 px-8 leading-none border-0 border-r-1 border-solid border-grey-200"
            onClick={() => {
              downloadIamge(text.qr_code, text.remark);
            }}>
            下载
          </Button>
          <Dropdown
            overlay={
              <Menu>
                <Menu.Item
                  onClick={() => {
                    window.globalState.muState("history", {
                      type: "push",
                      pathname: `/qr/create`,
                      query: { type: "update", id: text.id },
                    });
                  }}>
                  修改
                </Menu.Item>
                <Menu.Item
                  onClick={() => {
                    window.globalState.muState("history", {
                      type: "push",
                      pathname: `/qr/create`,
                      query: { type: "copy", id: text.id },
                    });
                  }}>
                  复制
                </Menu.Item>
                <Menu.Item
                  onClick={() => {
                    console.log(123);
                  }}>
                  删除
                </Menu.Item>
              </Menu>
            }
            trigger={["click"]}>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="http://www.alipay.com/"
              className="py-0 px-8 text-blue-default">
              编辑
            </a>
          </Dropdown>
        </>
      );
    },
  },
];

const ContentRight = ({ initFormData, setSelectedQr, loding }: ContentRightProps) => {
  const [formData, setFormData] = useState(initFormData);
  const [, setRender] = useState(0);

  useEffect(() => {
    setFormData(initFormData);
    const render = subject.subscribe((value: any) => {
      setRender(value);
    });

    return () => {
      render.unsubscribe();
    };
  }, [initFormData]);

  /* 列表选择事件 */
  const rowSelection = {
    columnWidth: 50,
    fixed: true,
    onChange: (selectedRowKeys: any[], selectedRows: any[]) => {
      setSelectedQr(selectedRows);
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, "selectedRows: ", selectedRows);
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === "Disabled User",
      name: record.name,
    }),
  };

  return (
    <div className="scrollY flex-1 h-full overflow-auto">
      <Table
        columns={fixedColumns}
        dataSource={formData}
        pagination={false}
        scroll={{ x: "100%" }}
        loading={loding}
        rowSelection={rowSelection}
        locale={{
          emptyText: (
            <div>
              <img
                className="m-auto"
                alt=""
                src="https://assets.weibanzhushou.com/web/we-work-webapp/group-manage_search-empty.294f614b38df.svg"
              />
              <p>没有搜索到相关结果</p>
            </div>
          ),
        }}
      />
      <Modal
        visible={visible}
        width={792}
        footer={null}
        onCancel={() => {
          visible = false;
          setRender(Math.random() + 1);
        }}>
        <QrDetail detailData={detailData} />
      </Modal>
    </div>
  );
};

export default ContentRight;
